<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品管理 - ERP系统</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>ERP系统 - 商品管理</h1>
        </header>
        
        <nav>
            <ul>
                <li><a href="index.html">采购订单管理</a></li>
                <li><a href="supplier.html">供应商管理</a></li>
                <li><a href="#product-list">商品列表</a></li>
                <li><a href="#create-product">创建商品</a></li>
                <li><a href="#search-product">查询商品</a></li>
            </ul>
        </nav>
        
        <main>
            <section id="product-list">
                <h2>商品列表</h2>
                <div class="toolbar">
                    <button id="refresh-btn">刷新</button>
                </div>
                <table id="products-table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>商品编码</th>
                            <th>商品名称</th>
                            <th>分类ID</th>
                            <th>单位</th>
                            <th>成本价</th>
                            <th>销售价</th>
                            <th>库存数量</th>
                            <th>状态</th>
                            <th>创建时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- 商品数据将通过JavaScript动态加载 -->
                    </tbody>
                </table>
            </section>
            
            <section id="create-product" class="hidden">
                <h2>创建商品</h2>
                <form id="create-product-form">
                    <div class="form-group">
                        <label for="product-code">商品编码:</label>
                        <input type="text" id="product-code" name="productCode" required>
                    </div>
                    <div class="form-group">
                        <label for="product-name">商品名称:</label>
                        <input type="text" id="product-name" name="productName" required>
                    </div>
                    <div class="form-group">
                        <label for="category-id">分类ID:</label>
                        <input type="number" id="category-id" name="categoryId" required>
                    </div>
                    <div class="form-group">
                        <label for="unit">单位:</label>
                        <input type="text" id="unit" name="unit" required>
                    </div>
                    <div class="form-group">
                        <label for="cost-price">成本价:</label>
                        <input type="number" step="0.01" id="cost-price" name="costPrice" required>
                    </div>
                    <div class="form-group">
                        <label for="sale-price">销售价:</label>
                        <input type="number" step="0.01" id="sale-price" name="salePrice" required>
                    </div>
                    <div class="form-group">
                        <label for="stock-quantity">库存数量:</label>
                        <input type="number" id="stock-quantity" name="stockQuantity" value="0" required>
                    </div>
                    <div class="form-group">
                        <label for="product-status">状态:</label>
                        <select id="product-status" name="status" required>
                            <option value="ACTIVE">上架</option>
                            <option value="INACTIVE">下架</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="product-remark">备注:</label>
                        <textarea id="product-remark" name="remark"></textarea>
                    </div>
                    <button type="submit">创建商品</button>
                </form>
            </section>
            
            <section id="edit-product" class="hidden">
                <h2>编辑商品</h2>
                <form id="edit-product-form">
                    <input type="hidden" id="edit-product-id" name="id">
                    <div class="form-group">
                        <label for="edit-product-code">商品编码:</label>
                        <input type="text" id="edit-product-code" name="productCode" required>
                    </div>
                    <div class="form-group">
                        <label for="edit-product-name">商品名称:</label>
                        <input type="text" id="edit-product-name" name="productName" required>
                    </div>
                    <div class="form-group">
                        <label for="edit-category-id">分类ID:</label>
                        <input type="number" id="edit-category-id" name="categoryId" required>
                    </div>
                    <div class="form-group">
                        <label for="edit-unit">单位:</label>
                        <input type="text" id="edit-unit" name="unit" required>
                    </div>
                    <div class="form-group">
                        <label for="edit-cost-price">成本价:</label>
                        <input type="number" step="0.01" id="edit-cost-price" name="costPrice" required>
                    </div>
                    <div class="form-group">
                        <label for="edit-sale-price">销售价:</label>
                        <input type="number" step="0.01" id="edit-sale-price" name="salePrice" required>
                    </div>
                    <div class="form-group">
                        <label for="edit-stock-quantity">库存数量:</label>
                        <input type="number" id="edit-stock-quantity" name="stockQuantity" required>
                    </div>
                    <div class="form-group">
                        <label for="edit-product-status">状态:</label>
                        <select id="edit-product-status" name="status" required>
                            <option value="ACTIVE">上架</option>
                            <option value="INACTIVE">下架</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="edit-product-remark">备注:</label>
                        <textarea id="edit-product-remark" name="remark"></textarea>
                    </div>
                    <button type="submit">更新商品</button>
                    <button type="button" id="cancel-edit">取消</button>
                </form>
            </section>
            
            <section id="search-product" class="hidden">
                <h2>查询商品</h2>
                <div class="search-form">
                    <div class="form-group">
                        <label for="search-id">商品ID:</label>
                        <input type="number" id="search-id" name="searchId">
                        <button id="search-by-id-btn">查询</button>
                    </div>
                    <div class="form-group">
                        <label for="search-code">商品编码:</label>
                        <input type="text" id="search-code" name="searchCode">
                        <button id="search-by-code-btn">查询</button>
                    </div>
                    <div class="form-group">
                        <label for="search-status">按状态查询:</label>
                        <select id="search-status" name="searchStatus">
                            <option value="">全部</option>
                            <option value="ACTIVE">上架</option>
                            <option value="INACTIVE">下架</option>
                        </select>
                        <button id="search-by-status-btn">查询</button>
                    </div>
                    <div class="form-group">
                        <label for="search-category">按分类查询:</label>
                        <input type="number" id="search-category" name="searchCategory">
                        <button id="search-by-category-btn">查询</button>
                    </div>
                </div>
            </section>
            
            <section id="product-details" class="hidden">
                <h2>商品详情</h2>
                <div class="product-info">
                    <div class="info-grid">
                        <div class="info-item">
                            <span class="info-label">ID:</span>
                            <span id="detail-id"></span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">商品编码:</span>
                            <span id="detail-product-code"></span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">商品名称:</span>
                            <span id="detail-product-name"></span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">分类ID:</span>
                            <span id="detail-category-id"></span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">单位:</span>
                            <span id="detail-unit"></span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">成本价:</span>
                            <span id="detail-cost-price"></span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">销售价:</span>
                            <span id="detail-sale-price"></span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">库存数量:</span>
                            <span id="detail-stock-quantity"></span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">状态:</span>
                            <span id="detail-status"></span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">创建时间:</span>
                            <span id="detail-created-time"></span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">更新时间:</span>
                            <span id="detail-updated-time"></span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">备注:</span>
                            <span id="detail-remark"></span>
                        </div>
                    </div>
                    <div class="product-actions">
                        <button id="edit-product-btn" class="btn btn-primary">编辑</button>
                        <button id="activate-product-btn" class="btn btn-success">上架</button>
                        <button id="deactivate-product-btn" class="btn btn-warning">下架</button>
                        <button id="delete-product-btn" class="btn btn-danger">删除</button>
                        <button id="back-btn" class="btn">返回</button>
                    </div>
                </div>
            </section>
        </main>
    </div>
    
    <script src="js/product.js"></script>
</body>
</html>